<template>
    <div>
        <setHeader title="活动编辑" settext="完成" @done="gotobtn()"></setHeader>
        <div class="content main-activity_editor">
            <div class="write_input_box">
                <label for="">活动标题：</label>
                <input type="text" placeholder="" v-model="activitylist.title" class="input_box_title">
            </div>
            <div class="write_input_box" @click="handClick">
                <label for="">开始时间：</label>
                <input type="text" placeholder="" v-model="activitylist.begin_time">
            </div>
            <div class="write_input_box" @click="endTimeClick">
                <label for="">结束时间：</label>
                <input type="text" placeholder="" v-model="activitylist.end_time">
            </div>
            <div class="write_input_box">
                <label for="">活动地点：</label>
                <input type="text" placeholder="" v-model="activitylist.address">
            </div>
            <div class="write_input_box">
                <label for="">活动价格：</label>
                <input type="text" placeholder="" v-model="activitylist.price">
            </div>
            <div class="write_textarea_box">
                <label for="">活动内容：</label>
                <textarea placeholder="文字标签"   style="-webkit-user-select:auto;"  contenteditable="true" v-model="activitylist.content"></textarea>
            </div>
            <div class="insert_pic">
                <label for="">编辑图片：</label>
                <div class="main-product_manage">
                    <ul>
                        <li>
                            <camera v-on:spot="spot" :headerimg="activitylist.img" :type="type"></camera>
                        </li>

                    </ul>
                </div>  
            </div>
        </div>
        <MobilePicker
            :valueStr="picker.value"
            :visible="picker.visible"
            :options="picker.options"
            v-on:checked="hideDatePicker"
        ></MobilePicker>
        <so-footer></so-footer>
    </div>
</template>

<script>
import setHeader from '../public/setHeader.vue';
import camera from '../public/act_bar';
import soFooter from '../components/footer-bar';
import MobilePicker from '@/components/datepickerMobile/datepickerMobile';
    export default {
        data() {
            return {
                t_type: '',
                picker: {
                    visible: false,
                    id: "",
                    value: "",
                    options: {
                        format: "yyyy-MM-dd HH:mm",
                        startDate: "1700-01-01",
                        endDate: "2500-01-01",
                        language: "cn",
                        timeRange: 10
                    }
                },
                hostlist: [],
                // activity_id: '',
                activitylist: {
                    title: '',
                    begin_time: '',
                    end_time: '',
                    address: '',
                    price: '',
                    access_token: '',
                    img:''
                },
                proData:'',
                type:'edit',
                c_id: ''
            }
        },
        mounted() {
            // let activity_id = this.$route.query.id;
            this.c_id = window.localStorage.getItem('cpId');
            this.activitylist.access_token = window.localStorage.getItem('access_token');
            console.log('+==',this.activitylist.access_token)
            this.activeeditor();
        },  
        methods: {
            // 关闭时间控件，获取时间
            hideDatePicker(time) {
                this.picker.visible = false;
                if(this.t_type == 2) {
                    this.activitylist.begin_time = time;   //this.time显示时间,  把时间赋值给begin_time，后面的赋值给前面的
                }else {
                    this.activitylist.end_time = time;   //this.time显示时间,  把时间赋值给end_time，后面的赋值给前面的
                }
            },
            // 结束时间
            endTimeClick() {
                this.t_type = 1;
                this.picker.visible = true;
            },
            // 开始时间
            handClick() {
                this.t_type = 2;
                this.picker.visible = true;
            },
            spot:function(data){
                this.proData = data;
                console.log(data)
            },
            activeeditor() {
                let activity_id = this.$route.query.id;
                // this.activitylist.access_token = window.localStorage.getItem('access_token');
                this.$fetch(this.$path + '/index.php/api/ActivityDetail/'+activity_id).then((response) => {
                    console.log('编辑活动', response); 
                    if(response.code == 200) {
                        this.activitylist = response.data;
                        let access_token = window.localStorage.getItem('access_token');
                        response.data.access_token = access_token;
                    }
                })
            },
            gotobtn() {
                if(!this.activitylist.title) {
                    this.$openTips({
                        text: "活动标题不能为空",
                        time:1000
                    });
                    return;
                }
                if(!this.activitylist.begin_time) {
                    this.$openTips({
                        text: "开始时间不能为空",
                        time:1000
                    });
                    return;
                }
                if(!this.activitylist.end_time) {
                    this.$openTips({
                        text: "结束时间不能为空",
                        time:1000
                    });
                    return;
                }
                if(!this.activitylist.address) {
                    this.$openTips({
                        text: "活动地点不能为空",
                        time:1000
                    });
                    return;
                }
                if(!this.activitylist.price) {
                    this.$openTips({
                        text: "活动价格不能为空",
                        time:1000
                    });
                    return;
                }
                if(this.proData.length < 1) {
                    this.$openTips({
                        text: "活动图片不能为空",
                        time:1000
                    });
                    return;
                }
                let activity_id = this.$route.query.id;
                // console.log('活动', activity_id)
                this.activitylist.pro = this.proData;
                this.$post(this.$path + '/api.php/Activity/CompanyActivitysave?activity_id=' + activity_id, this.activitylist).then((response) => {
                    console.log('编辑活动', response); 
                    if(response.code == 200) {
                        this.$router.replace({
                            path: '/userCenter/activityManage',
                            query: {cp_id: this.c_id,u_type:1}
                        })
                    }
                })
            },
        },
        components: {
            setHeader,
            camera,
            soFooter,
            MobilePicker
        }
    }
</script>

<style>
/* 内容 */
.main-activity_editor input {
    color: #666;
    font-size: 0.26rem;
}
.input_box_title {
    display: inline-block;
    width: 70% !important;
    white-space: nowrap;
    text-overflow: ellipsis;
    -o-text-overflow: ellipsis;
    overflow: hidden;
    font-size: 0.28rem !important;
    color: #333 !important;
}

/* 活动内容 */
.write_textarea_box {
    display: flex;
    justify-content: flex-start;
    border-bottom: 1px solid #d8d8d8;
    padding: 0.2rem 0 0 0.2rem;
}
.write_textarea_box label {
    width: 1.58rem;
    font-size: 0.28rem;
    color: #333;
    text-align: left;
}
.write_textarea_box textarea {
    width: 5.8rem;
    height: 2.24rem;
    outline: none;
    font-size: 0.28rem;
    color: #333;
}

/* 添加图片 */
.insert_pic {
    padding: 0.3rem 0;
    box-sizing: border-box;
}
.insert_pic label {
    font-size: 0.28rem;
    color: #333;
    text-align: left;
    display: block;
    padding-left: 0.23rem;
}

/* 图片排列 */
.main-product_manage {
    padding-top: 0.2rem;
}
.main-product_manage ul {
    margin: 0;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    overflow: hidden;
}
.main-product_manage ul>li {
    text-align: center;
    float: left;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    padding-bottom: 0.3rem;
    /* margin-left: 0.23rem; */
}
.main-product_manage img {
    width: 2rem;
}

/* 添加 */
/* .main-product_manage .add_active {
    width: 2.2rem !important;
    height: 2.2rem !important;
    background-color: #F2F2F2 !important;
    border-radius: 4px !important;
    margin: 0 !important;
    padding-bottom: 0 !important;
    padding-top: 0.01rem;
}
.main-product_manage .add_active span {
    width: 1rem;
    height: 1rem;
    background-color: #e50838;
    border-radius: 50%;
    display: block;
    margin: 0.6rem;
}
.main-product_manage .add_active .icon-jia {
    font-size: 0.48rem;
    line-height: 1rem;
    vertical-align: text-top;
    text-align: center;
    color: #fff;
} */


</style>